<template>
    <div>
        <div class="box">
            <div class="top">
                <el-input v-model="form.notice" type="textarea" maxlength="300" show-word-limit placeholder="请输入" style="width: 100%;" />
                <div class="file-list">
                    <div v-for="(item, index) in imgList" :key="index" class="img">
                        <el-image :src="item" :preview-src-list="[form.img]" class="img-preview" />
                        <div class="del" @click.stop="delImg(index)">+</div>
                    </div>
                    <div v-for="(item, index) in fileList" :key="index" :title="item" class="file">
                        <a :href="item" target="_blank"><img src="~@/assets/images/file.png" />{{ `文件` }}</a>
                        <div class="del" @click.stop="delFile(index)">+</div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="btns">
                    <el-upload
                        class="upload-demo"
                        action="upload"
                        :show-file-list="false"
                        :http-request="imgUpload"
                    >
                        <div class="item"><i class="el-icon-picture-outline" /></div>
                    </el-upload>
                    <el-upload
                        class="upload-demo"
                        action="upload"
                        :show-file-list="false"
                        :http-request="fileUpload"
                    >
                        <div class="item"><i class="el-icon-folder" /></div>
                    </el-upload> 
                </div>
                <div>
                    <el-button v-if="form.fid" size="mini" @click="handleCancel">取消</el-button>
                    <el-button type="primary" size="mini" @click="handleSubmit">提交</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { addFollow } from '@/api/business'
import { upFile } from '@/api/common'
export default {
    name: 'FollowAdd',
    props: {
        id: {
            type: String,
            required: true
        },
        edit: {
            type: Object,
            required: false
        }
    },
    data() {
        return {
            dialogVisible: false,
            form: {
                file: '',
                img: '',
                notice: '',
                fid: ''
            },
            imgList: [],
            fileList: []
        }
    },
    watch: {
        edit: {
            handler(val) {
                if (val && val.id) {
                    this.$nextTick(() => {
                        this.form.notice = val.notice;
                        this.form.fid = val.id;
                        this.imgList = val.img ? val.img.split(',') : [];
                        this.fileList = val.file ? val.file.split(',') : [];
                    })
                }
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        resetParams() {
            this.form = {
                file: '',
                img: '',
                notice: '',
                fid: ''
            };
            this.imgList = [];
            this.fileList = [];
        },
        // 图片上传
        imgUpload(e) {
            // 验证图片格式大小信息
            const isJPG = e.file.type == 'image/jpeg' || e.file.type == 'image/png';
            const isLt20M = e.file.size / 1024 / 1024 < 20;
            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
                return;
            }
            if (!isLt20M) {
                this.$message.error('上传图片大小不能超过 20MB!');
                return;
            }
            let data = new FormData();
            data.append('file', e.file);
            upFile(data).then(result => {
                if (result.status == 1) {
                    this.imgList.push(result.data.src);
                    this.$message.success('上传成功！')
                } else {
                    this.$message.warning('上传失败！')
                }
            })
        },
        delImg(index) {
            this.imgList.splice(index, 1);
        },
        // 文件上传
        fileUpload(e) {
            const isLt20M = e.file.size / 1024 / 1024 < 20;
            if (!isLt20M) {
                this.$message.error('上传文件大小不能超过 20MB!');
                return;
            }
            let data = new FormData();
            data.append('file', e.file);
            upFile(data).then(result => {
                if (result.status == 1) {
                    this.fileList.push(result.data.src);
                    this.$message.success('上传成功！')
                } else {
                    this.$message.warning('上传失败！')
                }
            })
        },
        delFile(index) {
            this.fileList.splice(index, 1);
        },
        handleSubmit(e) {
            if (this.form.notice == '') {
                this.$message.warning('内容不能为空！');
                return;
            }
            this.form.id = this.id;
            this.form.img = this.imgList.join(',');
            this.form.file = this.fileList.join(',');
            addFollow(this.form).then(res => {
                if (res.status == '1') {
                    this.$message.success('操作成功！')
                    this.resetParams()
                    this.$emit('success', res)
                } else {
                    this.$message.error(res.message)
                }
            }).finally(() => {
                this.dialogVisible = false
            })
        },
        handleCancel() {
            this.resetParams();
            this.$emit('cancel', null);
        }
    }
}
</script>
<style lang="scss" scoped>
.box {
    border-radius: 4px;
    .top {
        // height: 140px;
        position: relative;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        ::v-deep .el-textarea__inner {
            border: none;
        }
        .file-list {
            width: 100%;
            padding: 5px 10px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            .img {
                width: 30px;
                height: 30px;
                border-radius: 4px;
                object-fit: cover;
                cursor: pointer;
                position: relative;
                margin-right: 15px;
                margin-top: 10px;
                .del {
                    width: 14px;
                    height: 14px;
                    border-radius: 50%;
                    background: rgba($color: #000, $alpha: 0.5);
                    color: #fff;
                    text-align: center;
                    line-height: 11px;
                    transform: rotate(45deg);
                    position: absolute;
                    top: -4px;
                    right: -4px;
                }
                .img-preview {
                    width: 30px;
                    height: 30px;
                    border-radius: 4px;
                }
            }
            .file {
                height: 30px;
                padding: 5px 10px;
                box-sizing: border-box;
                border-radius: 4px;
                background: #f7f7f9;
                margin-right: 15px;
                margin-top: 10px;
                font-size: 12px;
                cursor: pointer;
                position: relative;
                .del {
                    width: 14px;
                    height: 14px;
                    border-radius: 50%;
                    background: rgba($color: #000, $alpha: 0.5);
                    color: #fff;
                    text-align: center;
                    line-height: 11px;
                    transform: rotate(45deg);
                    position: absolute;
                    top: -4px;
                    right: -4px;
                }
                img {
                    width: 20px;
                    height: 20px;
                    border-radius: 0;
                    margin-right: 5px;
                    float: left;
                }
            }
        }
    }
    .bottom {
        width: 100%;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        .btns {
            width: 60px;
            display: flex;
            justify-content: space-between;
            .item {
                // width: 26px;
                // height: 26px;
                padding: 2px 5px;
                font-size: 16px;
                text-align: center;
                border: 1px solid #eee;
                border-radius: 3px;
                cursor: pointer;
            }
        }
    }
}
</style>